<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>https://cn.vuejs.org/v2/guide/components.html</title>
    <link rel="stylesheet" href="bootstrap.css">
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript" src="bootstrap.js"></script>
</head>
<body>
<div class="container" id="box">
    <div class="col-lg-12">
        <child message="hello!"></child>
    </div>
    <div class="col-lg-12">
        <div class="form-group">
            <input v-model="parentMsg" class="form-control">
            <child v-bind:message="parentMsg"></child>
        </div>
    </div>
</div>
</body>
</html>

<script>

    var child = Vue.component('child', {
        // 声明 props
        props: ['message'],
        // 就像 data 一样，prop 可以用在模板内
        // 同样也可以在 vm 实例中像 “this.message” 这样使用
        template: '<div class="alert alert-info">{{ message }}</div>'
    });

    new Vue({
        el: "#box",
        data: {
            parentMsg: ''
        },
        components: {}
    })
</script>